<template>
  <div class="photo-card">
    <img :src="require('../../pt/'+photo.imgurl+'.jpg')" class="photo-img">
    <div class="photo-bg" @click="toDetail"></div>
    <div class="photo-like">
            <span class="iconfont icon-aixin1" @click="clickLike"></span>
            <span class="like-data">{{ photo.like}}</span>
    </div>
  </div>
</template>

<script>
import { label, cardColor } from "@/static/data";
export default {
  data() {
    return {
      label,
      cardColor,
    }
  },
  props: {
    photo:{
      default:{},
    },
  },
  computed: {
    card(){
      return this.photo;
    },
  },
};
</script>

<style lang="less" scoped>
.photo-card {
    position: relative;
    overflow-y: auto;

    .photo-img {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .photo-bg {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 0.3s;
        cursor: pointer;
    }

    .photo-like {
        position: absolute;
        left: 6px;
        top: 6px;
        background: rgba(255, 255, 255, 0.80);
        border-radius: 20px;
        height: 28px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        background: blur(20px);
        opacity: 0;
        transition: all 0.3s;
        cursor: pointer;

        span {
            color:#202020;
        }

        .icon-aixin1 {
            color: #949494;
            padding-right: 4px;
        }
        .islike {
            color: #F67770;
        }

    }

    &:hover {
        .photo-bg {
            opacity: 1;
        }
        .photo-like {
            opacity: 1;
        }
}
    
}
</style>